<template>
	<view>
		<block>
			<view class="match_body" @click="toDetails(item)">
				<view class="match_img">
					<image :src="imagelist(item.Images)[0]" mode="aspectFill"></image>
					<view class="endimgbox" v-if="item.Status == 3">
						<image class="endimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722498273000623.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="match_cell">
					<view class="match_content">
						<view class="match_titbox">
							<view class="match_topic">
								{{ $util.entitiesToUtf16(item.Title) }}
							</view>
							<view class="match_tag" v-if="item.TagList.length">
								<view class="tag_cell" v-for="(el,inx) in item.TagList" :key="inx">
									{{el}}
								</view>
							</view>
						</view>
						<view class="match_litbox">
							<view class="litbox_cell">
								<view class="litbox_content">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1737273445540861.png" mode="aspectFill"></image>
									<view class="address">
										{{getTime2(item.ServerDate)+' '+getWeek(item.ServerDate)}}
									</view>										
								</view>
							</view>
							<view class="litbox_cell">
								<view class="litbox_content">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17372734676861415.png" mode="aspectFill"></image>
									<view class="address">
										{{item.Place}} 
									</view>
								</view>
								<view class="litbox_cout" v-if="item.Distance">
									{{(item.Distance).toFixed(2)}}km	
								</view>
							</view>
						</view>
						
					</view>
					<view class="match_foot">
						<view class="match_person">
							<view class="person_img" v-if="item.Item.length">
		            <block v-for="(el,inx) in item.Item" :key="inx">
		              <image v-if="inx<=6" :src="el.HeadImgUrl" mode="aspectFill"></image>
		            </block>
							</view>
		          <view class="person_img" v-else>
		            <block>
		              <image :src="item.HeadImgUrl" mode="aspectFill"></image>
		            </block>
							</view>
							<view class="person_text">
								{{item.Item.length+'/'+item.PeopleNum+'人参与'}}
							</view>
						</view>
						<!-- <view class="match_btn" :class="item.IsEnd ? 'match_btn_gray' : ''">
							{{item.IsEnd?'已截止':'报名中'}}
						</view> -->
					</view>
				</view>
			</view>
			
			<view style="height: 100rpx;"></view>
			
			
		</block>
		
		<!-- 暂存25116 -->
		<view class="actconBoxCom" @click="toDetails(item)" v-if="false">
			<view class="pobox">
				<image class="actimg" :src="imagelist(item.Images)[0]" mode="aspectFill"></image>
				<view class="endimgbox" v-if="item.Status == 3">
					<image class="endimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722498273000623.png"></image>
				</view>
			</view>
		
			<view class="actright">
				<view class="actname">{{ $util.entitiesToUtf16(item.Title) }}</view>
				<view>
					<view class="actgup">
						<image class="actgupimg" src="https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1722252582451895.png"></image>
						<view class="actguptext">{{ getTime2(item.ServerDate) + ' ' + getWeek(item.ServerDate) + item.ServerTime }}</view>
					</view>
					<view class="actgup">
						<image class="actgupimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17152361921951044.png"></image>
						<view class="actguptext hiddenText">{{ item.Place ? item.Place : '' }}</view>
					</view>
					<view class="actgup2">
						<!-- <view class="peoplenum">{{ item.Distance ? item.Distance + 'km' : '0km' }}</view> -->
						<view class="peopelbox">
							<view class="peoplenum">{{ item.Item ? item.Item.length : '0' }}人</view>
							<view class="imgbox" v-if="imglist1(item.Item).length > 0">
								<image
									class="peoImg"
									v-for="(value, index) in imglist1(item.Item)"
									:key="index"
									:src="value.HeadImgUrl"
									mode="aspectFill"
								></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	
</template>

<script>
export default {
	props: {
		item: {
			default: {},
			typeof: Object,
		},
	},
	data() {
		return {};
	},
	methods: {
		imagelist(Images) {
			if (Images) {
				let imglist = Images.split(',');
				return imglist;
			} else {
				return '';
			}
		},
		imglist1(e) {
			if (e) {
				let list = e.slice(0, 6);
				return list;
			} else {
				return '';
			}
		},
		getTime2(l) {
			let d = new Date(l);
			let timestamp = d.getTime();
			return this.$u.date(timestamp, 'mm-dd');
		},
		toDetails(item) {
			this.nav_to(`/pages/ball/ball_details?id=${item.ID}`);
		},
	},
};
</script>

<style lang="less">
.pobox {
	position: relative;
}
.endimgbox {
	min-width: 238rpx;
	max-width: 238rpx;
	    height: 318rpx;
	min-height: 318rpx;
	max-height: 318rpx;
	position: absolute;
	top: 0;
	left: 0;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	justify-content: center;
	align-items: center;
}
.endimg {
	width: 160rpx;
	height: 144rpx;
}
.actconBoxCom {
	// width: 702rpx;
	width: 100%;
	height: fit-content;
	padding: 24rpx;
	background: #ffffff;
	border-radius: 24rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;
	margin-bottom: 24rpx;

	.actimg {
		width: 200rpx;
		height: 280rpx;
		border-radius: 16rpx;
		// background-color: red;
	}

	.actright {
		flex: 1;
		padding: 24rpx;
		height: 100%;
		display: flex;
		flex-flow: column;
		justify-content: space-between;

		.actname {
			font-size: 28rpx;
			font-weight: bold;
			color: #333333;
			margin-bottom: 76rpx;
		}

		.actgup {
			display: flex;
			margin-bottom: 8rpx;

			.actgupimg {
				width: 32rpx;
				height: 34rpx;
				margin-right: 4rpx;
			}

			.actguptext {
				font-size: 24rpx;
				color: #999999;
				// flex: 1;
				width: 320rpx;
			}
		}

		.actgup2 {
			display: flex;
			margin-top: 26rpx;
			justify-content: flex-end;
			align-items: center;

			.peopelbox {
				display: flex;
				align-items: center;
			}

			.peoplenum {
				font-size: 20rpx;
				color: #999999;
				margin-right: 16rpx;
			}

			.imgbox {
				display: flex;

				.peoImg {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					margin-left: -9rpx;
				}
			}
		}
	}
}






.match_body{
    height: 318rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 12rpx;
    overflow: hidden;
    margin-bottom: 30rpx;
    image{
     width: 100%;
     height: 100%; 
    }
    .match_img{
      min-width: 238rpx;
      max-width: 238rpx;
      height: 100%;
			min-height: 100%;
			max-height: 100%;
      border-radius: 12rpx;
      overflow: hidden;
      z-index: 9;
			position: relative;
    }
    .match_cell{
      width: calc(100% - 238rpx + 20rpx);
      height: 100%;
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      padding: 29rpx 20rpx 21rpx;
      padding-left: 40rpx;
      margin-left: -20rpx;
      background-image: linear-gradient(90deg,#fbe4ec 0%,#e7ccff 100%);
      .match_content{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding-bottom: 16.5rpx;
        margin-bottom: 22.5rpx;
        border-bottom: 1rpx solid rgba(255, 255, 255, 0.4);
        .match_titbox{
					margin-bottom: 20rpx;
          .match_topic{
            font-weight: 900;
            font-size: 30rpx;
            color: #111;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-bottom: 20rpx;
          }
          .match_tag{
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            .tag_cell{
              padding: 0rpx 10rpx;
							display: flex;
							align-items: center;
							height: 30rpx;
							min-height: 30rpx;
							max-height: 30rpx; 
              background: #111;
              border-radius: 8rpx;
              font-size: 18rpx;
              font-weight: 400;
              color: #fff;
              margin-right: 16rpx;
              margin-bottom: 10rpx;
              &:last-child{
                margin-right: 0;
              }
            }
          }
        }
        .match_litbox{
          
          .litbox_cell{
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 14rpx;
            &:last-child{
              margin-bottom: 0;
            }
            .litbox_content{
              width: 70%;
              display: flex;
              align-items: center;
              image{
								width: 22rpx;
								height: 22rpx;
                margin-right: 9rpx;
              }
              .address{
                width: 100%;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 22rpx;
                color: #333;
             }
            }
            .litbox_cout{
              font-size: 22rpx;
              color: #333;
            }
          }
          
        }
      }
      .match_foot{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .match_person{
          display: flex;
          align-items: center;
          .person_img{
            display: flex;
            align-items: center;
            image{
              width: 36rpx;
              height: 36rpx;
              border-radius: 50%;
              overflow: hidden;
              border: 2rpx solid #eee;
              margin-left: -16rpx;
              &:first-child{
                margin-left: 0;
              }
            }
          }
          .person_text{
						font-weight: 400;
            font-size: 20rpx;
            color: #333;
            margin-left: 11rpx;
          }
        }
        .match_btn{
					width: 130rpx;
					height: 56rpx;
					font-weight: 900;
          font-size: 22rpx;
          color: #FFFFFF;
          background-image: linear-gradient(90deg, #a160e2 0%, #3241f4 100%);
          border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
        }
				.match_btn_gray{
					background: rgba(0, 0, 0, 0.3);
					// background: #858BCD;
				}
      }
    }
    .match_blue{
      background-image: linear-gradient(90deg, #dff1ff 0%, #b5bbff 100%);
    }
  }
</style>
